<template>
	<view>
		<view class="search">
			<input type="text" class="input" placeholder="请输入搜索内容" v-model="title">
		</view>
		<view class="nav">
			<view class="nav-item" :class="{active:curerntIndex == index}" v-for="item,index in navList" :key="index" @click="change(item,index)">
				{{item}}
			</view>
		</view>
		<view class="goods">
			<view class="goods-item" v-for="item,index in searchList" :key="index">
				<image :src="item.pic" mode="" class="img"></image>
				
				<view class="title">
					{{item.name}}
				</view>
				<view class="desc">
					{{item.characteristic}}
				</view>
				<view class="price">
					{{item.minPrice}}
				</view>
				<view class="price">
					{{item.numberSells}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				history:[],//存放搜索的历史记录
				title:'',
				searchList:[],//请求列表的数据
				navList:['综合','新品','销量','价格'],
				curerntIndex:0,//保存下标
				isSortPrice:false,//false表示升序
				isSortSell:false,//false表示升序
			};
		},
		onLoad(options) {
			this.title = options.title
			console.log(options);
			// 获取一次,防止 覆盖
			this.history = uni.getStorageSync('history') || []
			// 把搜索的内容添加的历史记录的数组里面 unshift往数组的前面添加
			this.history.unshift(options.title)
			// 去重
			this.history = [...new Set(this.history)]
			// 存到本地
			uni.setStorageSync('history',this.history)
			
			
			// 请求搜索的接口
			uni.request({
				url:'https://api.it120.cc/hjl/shop/goods/list/v2',
				method:"POST",
				data:{
					nameLike:this.title
				},
				success: (res) => {
					console.log(res);
					// 接口有问题  后端没有通过我们的参数进行搜索  我们自己手动给他做筛选
					this.searchList = res.data.data.result.filter(item=>item.name.includes(this.title))
				}
			})
			
			
			
		},
		methods:{
			change(item,index){
				this.curerntIndex = index
				if(item == '价格'){
					this.isSortPrice = !this.isSortPrice
					this.searchList.sort((a,b)=>{
						return this.isSortPrice?b.minPrice - a.minPrice:a.minPrice - b.minPrice
					})
					
					
				}else if(item == '销量'){
					this.isSortSell = !this.isSortSell
					this.searchList.sort((a,b)=>{
						return this.isSortSell?b.numberSells - a.numberSells:a.numberSells - b.numberSells
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
.search{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: cornsilk;
		.input{
			width: 80%;
			height: 70%;
			border-radius: 20rpx;
			background: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}
	.goods{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		.goods-item{
			
			width: 50%;
			font-size: 28rpx;
			.img{
				width: 100%;
				height: 300rpx;
			}
			
		}
	}
	.nav{
		width: 100%;
		display: flex;
		align-items: center;
		height: 100rpx;
		justify-content: space-around;
		.nav-item{
			flex:1;
			text-align: center;
		}
		.active{
			color:#c00;
		}
	}
</style>
